/* 登录表单样式 (Enhanced) */

/* 容器卡片 - 玻璃拟态 + 光晕 */
.auth-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px !important;
  padding: 40px 46px 32px 46px;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.2);
  animation: cardFadeIn .6s ease both;
}
.auth-card::before, .auth-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.auth-card::before {
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.35), transparent 55%),
              radial-gradient(circle at 15% 85%, rgba(255,255,255,0.2), transparent 60%);
  opacity: .75;
}
.auth-card::after {
  background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0));
  mix-blend-mode: overlay;
  opacity: .4;
}

/* 动画 */
@keyframes cardFadeIn { from { transform: translateY(24px) scale(.96); opacity:0;} to { transform: translateY(0) scale(1); opacity:1; } }
@keyframes inputGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.25);} 50% { box-shadow: 0 0 0 4px rgba(255,255,255,0); } }
@keyframes pulseGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shakeError { 0%,100% { transform: translateX(0);} 20% { transform: translateX(-6px);} 40% { transform: translateX(5px);} 60% { transform: translateX(-4px);} 80% { transform: translateX(3px);} }
@keyframes ripplePulse { 0% { transform: scale(.15); opacity:.55;} 70% { transform: scale(3.2); opacity:0;} 100% { opacity:0; } }
@keyframes underlineSlide { 0% { transform: translateX(-60%) scaleX(.2); opacity:0;} 60% { opacity:1;} 100% { transform: translateX(0) scaleX(1); opacity:1;} }

/* 表单间距 */
.auth-card :deep(.n-form-item) { margin-bottom: 26px; }

/* 输入框基础 */
.auth-card :deep(.n-input) {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  transition: all .35s cubic-bezier(.4,.0,.2,1);
  position: relative;
}
/* Hover & Focus */
.auth-card :deep(.n-input:hover) {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}
.auth-card :deep(.n-input.n-input--focus) {
  border-color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.24);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 6px 18px -6px rgba(0,0,0,0.45);
  animation: inputGlow 2.4s ease-in-out infinite;
}

/* 输入文本 */
.auth-card :deep(.n-input .n-input__input-el) {
  background: transparent;
  color: #fff;
  padding-left: 54px;
  padding-right: 18px;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: .5px;
}

/* 占位符 */
.auth-card :deep(.n-input .n-input__input-el::placeholder) {
  color: rgba(255,255,255,0.55);
  transition: all .35s;
  transform: translateY(0);
}
.auth-card :deep(.n-input .n-input__input-el:focus::placeholder) {
  opacity: .35;
  transform: translateY(-2px) scale(.95);
}

/* 前缀图标 */
.auth-card :deep(.n-input .n-input__prefix) {
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  transition: color .35s, transform .35s;
}
.auth-card :deep(.n-input.n-input--focus .n-input__prefix) { color:#fff; transform: scale(1.06); }

/* 错误状态 */
.auth-card :deep(.n-form-item--error .n-input) {
  border-color: rgba(255, 92, 92, 0.85) !important;
  background: rgba(255, 40, 40, 0.15) !important;
  box-shadow: 0 0 0 2px rgba(255,60,60,0.25) !important;
  animation: shakeError .55s ease;
}
.auth-card :deep(.n-form-item--error .n-form-item-feedback__line) {
  color: #ff8a8a;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3px;
}

/* 记住我 + 忘记密码 */
.form-options { display:flex; justify-content:space-between; align-items:center; margin-bottom: 34px; }
.form-options :deep(.n-checkbox .n-checkbox__label) { color: rgba(255,255,255,0.88); font-weight:500; }
.form-options :deep(.n-button) { color: rgba(255,255,255,0.75); transition: color .3s; }
.form-options :deep(.n-button:hover) { color:#fff; }

/* 提交按钮 */
.submit-button {
  --grad: linear-gradient(125deg,#6da5ff,#8f7bff,#ff6db7,#ff9d59);
  background: var(--grad);
  background-size: 300% 300%;
  animation: pulseGradient 6s ease infinite;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  height: 52px;
  border-radius: 16px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.45), 0 4px 12px -4px rgba(0,0,0,0.4);
  transition: all .45s cubic-bezier(.19,1,.22,1);
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.submit-button::before {
  /* shimmer line */
  content:'';
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  opacity:0;
  pointer-events:none;
}
.submit-button:hover::before { animation: shimmer 1.2s ease forwards; }
@keyframes shimmer { 0% { left:-45%; opacity:0;} 10% { opacity:.9;} 50% { opacity:.75;} 100% { left:120%; opacity:0;} }
.submit-button:active { transform: translateY(-1px) scale(.97); }
.submit-button:active::after { animation: ripplePulse .75s ease-out; }
.submit-button::after {
  content:'';
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  width:14px;
  height:14px;
  background: rgba(255,255,255,.55);
  border-radius:50%;
  transform: scale(0);
  opacity:0;
  pointer-events:none;
}

/* JS 可选: 在按钮点击时设置 CSS 变量 --x / --y (若不设置则中心) */

/* 立即注册按钮交互增强 */
.switch-link { position: relative; }
.switch-link :deep(.n-button) { overflow:hidden; padding:0 4px; }
.switch-link :deep(.n-button)::before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at center, rgba(255,255,255,.35), rgba(255,255,255,0));
  opacity:0;
  transform: scale(.4);
  transition: transform .5s, opacity .5s;
}
.switch-link :deep(.n-button:hover)::before { opacity:.35; transform: scale(1); }
.switch-link :deep(.n-button:active)::before { opacity:.6; transform: scale(1.25); transition: transform .25s, opacity .25s; }
.switch-link :deep(.n-button)::after {
  /* underline animation override */
  bottom:0;
  height:2px;
  background: linear-gradient(90deg,#6da5ff,#8f7bff,#ff6db7,#ff9d59);
  background-size:200% 100%;
  animation: none;
}
.switch-link :deep(.n-button:hover)::after {
  animation: underlineSlide .6s ease forwards, pulseGradient 6s linear infinite;
}

/* Divider */
.divider { margin: 28px 0 26px; }
.divider :deep(.n-divider__title) { color: rgba(255,255,255,0.8); font-size: 13px; letter-spacing:1px; font-weight:500; }
.divider :deep(.n-divider__line) { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)); height:1px; }

/* 社交登录 */
.social-login { display:flex; justify-content:center; gap:20px; margin-bottom: 28px; }
.social-btn { width:54px; height:54px; border-radius:18px !important; background: rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28); backdrop-filter: blur(12px); transition: all .45s; position:relative; overflow:hidden; }
.social-btn::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%,rgba(255,255,255,0.5),rgba(255,255,255,0)); opacity:0; transition: opacity .4s; }
.social-btn:hover { transform: translateY(-5px) scale(1.05); border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.22); box-shadow: 0 10px 28px -6px rgba(0,0,0,0.45); }
.social-btn:hover::before { opacity:.85; }
.social-btn:active { transform: translateY(-2px) scale(0.98); }

/* 响应式 */
@media (max-width: 640px) {
  .auth-card { padding: 34px 28px 26px; border-radius: 24px !important; }
  .submit-button { height: 50px; font-size: 15px; }
  .social-btn { width:50px; height:50px; }
  .auth-card :deep(.n-input .n-input__input-el) { font-size:15px; padding-left:50px; }
}

@media (max-width: 420px) {
  .auth-card { padding: 30px 22px 24px; }
  .auth-card :deep(.n-form-item) { margin-bottom: 22px; }
  .submit-button { margin-bottom: 24px; }
  .social-login { gap:16px; }
}

/* 触控优化 */
@media (hover:none) {
  .submit-button:hover { transform:none; }
  .switch-link :deep(.n-button:hover)::before { opacity:.25; }
}
